<template>
    <div id="taskmanage">
       <div class="tablelist">
           <div style="border-bottom:1px solid #eeeeee">
                <p class="titlefont" >
                    任务管理
                </p>
           </div>
            
            <div>
               <div style="overflow: hidden">
                    <div style="margin:10px 0 10px 20px; float:left">
                        <at-button type='primary' class="button_add" @click='addmsg' style='position:relative;'>
                            <i class="saas-icon-ten" style="position:absolute;top:4px;left:10px;font-size:20px"></i>
                            <span style='margin-right:-20px'>新 增</span>
                        </at-button>
                    </div>
                    <div style="margin:10px 20px 10px 0px; float:right">
                        <at-search class='search_input' 
                                    project='mh' 
                                    type="text" 
                                    v-model='search'
                                    placeholder="请输入任务名称" 
                                    icon="search" 
                                    @keyup.enter.native="searchmsg" 
                                    :on-icon-click="searchmsg" >
                        </at-search>
                    </div>
               </div>
               <div class="tablebox" style="margin:0 20px;">
                   <at-table 
                        style="width:100%;"
                        @cell-click = 'alert'
                        :data='tableTasklist.dataSource'
                        :show-header='true'
                        :border='false'
                        @sort-change= "changeSort"
                        @filter-change="filtersChange" 
                        >  
                    <at-table-column label='任务名称' 
                                    :show-overflow-tooltip=true 
                                     prop='task_name' 
                                     width='auto'>
                    </at-table-column>
                    <at-table-column label='任务监测范围' 
                                    :show-overflow-tooltip=true 
                                     prop='aim_names' 
                                     width='auto'>
                    </at-table-column>   
                    <at-table-column label='任务类型' 
                                     prop='task_type' 
                                     width='130px'
                                     column-key="btask_type"  
                                    :filters="[
                                        { text: '深度分析任务', value: '深度分析任务' }, 
                                        { text: '流量监测任务', value: '流量监测任务' },
                                        { text: '审计监测任务', value: '审计监测任务' },
                                        { text: '脆弱性监测任务', value: '脆弱性监测任务' },
                                    ]" >
                    </at-table-column>
                    <at-table-column label='任务来源' 
                                     prop='task_source' 
                                     width='100px'
                                     column-key="btask_source"  
                                    :filters="[
                                        { text: '安全分析', value: '安全分析' }, 
                                        { text: '任务管理', value: '任务管理' }
                                    ]">
                    </at-table-column>         
                    <at-table-column label='创建时间' 
                                     prop='r_time' 
                                     sortable
                                     width='150px'>
                    </at-table-column>
                    <at-table-column label='创建人' 
                                     prop='person_name' 
                                     width='120px'>
                    </at-table-column>
                    
                    <at-table-column label='任务状态' 
                                     prop='task_state' 
                                     width='124px'
                                     column-key="btask_state"  
                        :filters="[
                            { text: '已下发', value: '已下发' }, 
                            { text: '已完成', value: '已完成' },
                            { text: '超时未反馈', value: '超时未反馈' },
                        ]">
                    </at-table-column>

                    <at-table-column label='反馈情况' 
                                     prop='feedback' 
                                     width='90px'
                                    >
                    </at-table-column>
                    <at-table-column label='操作' width='124px'>
                        <template  slot-scope="scope">
                            <span :style="scope.row.flag>0?'color:#1f92ef': 'color:#CCCDCF'" 
                                  @click.stop="operateView(scope.row)">
                                  查看反馈数据      
                            </span>
                        </template>
                    </at-table-column>
                    </at-table> 
               </div>
               <div style=" margin :20px 34%">
                    <Pagination :currentPage="parameterTasklist.pagination.current" 
                                :total="tableTasklist.total.total" 
                                :pageSizes="[20,40,60]" 
                                :pageSize="parameterTasklist.pagination.pageSize"
                                @current-change="handleCurrentChange"
                                @size-change="handleSizeChange" 
                                layout='total, sizes, prev, pager, next, jumper'></Pagination>
               </div>
            </div>
       </div>
       
       
       <div class="msglist">
          <div>
            <div v-if = "eventStatus == 0" style="padding:20px; height: 50px">点击可查看任务详情</div>
          </div>
            
            <div v-if = "eventStatus == 1" >
              <div style="border-bottom:1px solid #eeeeee">
                    <p class="titlefont">
                      任务详情
                    </p>
                </div>
              <div style="padding:20px; background: #FFF">
                <div style="border:1px solid #eeeeee">
                    <div style="border-bottom: 1px solid #eeeeee">
                      <p class="titlefont">
                         基本信息
                      </p> 
                    </div>
                    <table style="width: 100%; margin-top: 20px;">
                        <tr>
                            <td class="keyValue">任务名称</td>
                            <td class="valValue">{{tableTaskdetails.task_details[0]['task_name']}}</td>
                        </tr>
                        <tr>
                            <td class="keyValue">任务类型</td>
                            <td class="valValue">{{tableTaskdetails.task_details[0]['task_type']}}</td>
                        </tr>
                        
                        <tr>
                            <td class="keyValue">任务时间范围</td>
                            <td class="valValue">{{tableTaskdetails.task_details[0]['time_range']}}</td>
                        </tr>
                        
                        <tr>
                            <td class="keyValue">任务监测范围</td>
                            <td class="valValue">{{tableTaskdetails.task_details[0]['aim_names']}}</td>
                        </tr>

                        <tr>
                            <td class="keyValue">任务状态</td>
                            <td class="valValue">{{tableTaskdetails.task_details[0]['task_state']}}</td>
                        </tr>
                        
                        <tr>
                            <td class="keyValue">任务来源</td>
                            <td class="valValue">{{tableTaskdetails.task_details[0]['task_source']}}</td>
                        </tr>
                        
                        <tr v-for="(item,i) in func(tableTaskdetails.task_details[0].task_element)" :key="i">
                            <td class="keyValue">{{item.element_type}}</td>
                            <td class="valValue">{{item.element_name}}</td>
                        </tr>
                        
                        
                        <tr>
                            <td class="keyValue">任务下发时间</td>
                            <td class="valValue">{{tableTaskdetails.task_details[0]['issue_time']}}</td>
                        </tr>

                        <tr>
                            <td class="keyValue">任务反馈时间</td>
                            <td class="valValue">{{tableTaskdetails.task_details[0]['feedback_time']}}</td>
                        </tr>
                        
                        <tr>
                            <td class="keyValue">创建人</td>
                            <td class="valValue">{{tableTaskdetails.task_details[0]['person_name']}}</td>
                        </tr>
                   </table>
                </div>
                <div v-if="tableTaskdetails.task_config[0].length !=0" style="border:1px solid #eeeeee; margin-top:20px;">
                    <div style="border-bottom: 1px solid #eeeeee">
                      <p class="titlefont">
                         任务配置
                      </p> 
                    </div>
                   <div style="padding:20px;">
                       <at-tabs v-model="activeName"  type="border-card">
                          <at-tab-pane v-for="(item, index) in tableTaskdetails.task_config[0]" 
                            :key='index' 
                            :name="'name'+index">
                            <span slot="label">{{item['agency_name']}}</span>
                            
                            <table style="width:100%">
                              <div v-for="(itemaim, index0) in item.aim">
                                <tr>
                                  <td class="keyValue" style="width:100%">{{itemaim}}</td>
                                </tr>
                              </div>
                            </table>
                          </at-tab-pane>
                    </at-tabs>
                   </div>
                   
                </div>
              </div>
                 

            </div>
            <div v-if= "eventStatus == 2" >
              <div style="border-bottom:1px solid #eeeeee">
                  <p class="titlefont">
                    新增任务
                  </p>
              </div>
              <taskadd></taskadd>
            </div>
        </div>
        
       </div>
    </div>
</template>
<script>
import { mapState } from 'vuex'
import taskadd from './taskadd.vue'
import { myConsole } from './js/util.js'
export default {
  data () {
    return {
      search: '',
      eventStatus: 0,
      activeName: 'name0'
    }
  },
  components: {
    taskadd
  },
  computed: {
    ...mapState({
      tableTasklist: state => state.taskManagement.tableTasklist,
      parameterTasklist: state => state.taskManagement.parameterTasklist,
      tableTaskdetails: state => state.taskManagement.tableTaskdetails
    })
  },
  methods: {

    func (data) {
      if (data) {
        return JSON.parse(data)
      } else {
        return []
      }
    },
    alert (val) {
      this.activeName = 'name0'
      this.eventStatus = 1
      this.$store.dispatch('taskManagement/gettaskdetails', val.task_id)
    },
    // 换页
    handleCurrentChange (page) {
      this.$store.commit('taskManagement/changetaskCurrentPage', page)
      this.$store.dispatch('taskManagement/gettasklist')
    },
    // 改变每页条数
    handleSizeChange (pagesize) {
      this.$store.commit('taskManagement/changetaskPageSize', pagesize)
      this.$store.dispatch('taskManagement/gettasklist')
    },
    // 搜索
    searchmsg () {
      this.$store.commit('taskManagement/changetaskSearch', this.search)
      this.$store.dispatch('taskManagement/gettasklist')
    },
    // 排序
    sortChange ({ prop, order }) {
      if (order !== null) {
        if (order == 'ascending') {
          order = 'ascing'
        } else {
          order = 'descing'
        }
        let data = {
          'prop': 'b' + prop,
          'order': order
        }
        this.$store.commit('taskManagement/changetaskSorter', data)
        this.$store.dispatch('taskManagement/gettasklist')
      }
    },
    // 查看监测数据
    operateView (val) {
      // this.$router.push({ path: '/business/task/taskFeedBack/' + val.task_id })
      if (val.flag > 0) {
        if (val.task_type == '流量监测任务') {
          this.$router.push({ path: '/business/task/taskflow/' + val.task_id })
          this.$store.dispatch('taskManagement/getflowmontor', val.task_id)
        } else {
          this.$router.push({ path: '/business/task/taskFeedBack/' + val.task_id })
        }
      }
    },
    // 排序
    changeSort ({ prop, order }) {
      if (order !== null) {
        let data = {
          'field': 'b' + prop,
          'order': order.replace('ing', '')
        }
        this.$store.commit('taskManagement/changetaskSorter', data)
        this.$store.dispatch('taskManagement/gettasklist')
      }
    },

    // 筛选
    filtersChange (val) {
      myConsole(val)
      this.$store.commit('taskManagement/changetaskFilters', val)
      this.$store.dispatch('taskManagement/gettasklist')
      // 查询节点
      this.$store.dispatch('taskManagement/configBaseItems', '1245')
    },
    // 新增
    addmsg () {
      this.eventStatus = 2
    }
  },
  mounted () {
    this.$store.dispatch('taskManagement/gettasklist')
    this.$store.dispatch('taskManagement/configBaseItems', '1245')
  }
}
</script>
<style lang='less'>
@import './style/taskmanagement.less';
</style>
<style lang='less'>
#taskmanage {
.at-tabs__nav-scroll{
    // overflow: visible;
    // border-bottom: 1px solid #eeeeee;
    height: 35px;
    .at-tabs__nav{
      margin-right: 5px;
      .at-tabs__item {
        background-color: #ffffff;
        border-top:1px solid #ffffff;
        border-left:1px solid #ffffff;
        border-right:1px solid #ffffff;
        border-bottom:1px solid #eeeeee;
        min-width: 30px;
        height: 35px;
        line-height: 35px;
      }
      .is-active {
        border-top:1px solid #eeeeee;
        border-left:1px solid #eeeeee;
        border-right:1px solid #eeeeee;
        border-bottom:1px solid #ffffff;
        color:#1f92ef;
        font-weight: bolder;
      }
    }
  }
  /deep/ .at-tabs__content {
    padding: 0 20px;
    .analyze-statistical-container{
      display: grid;
      width:100%;
      grid-template-columns:2fr 1fr 1fr;
      grid-template-rows: 150px;
      grid-gap: 20px;
      .analyze-statistical-box{
        border: 1px solid #eeeeee;
        .statistics-content{
          width:100%;
          height: 90px;
          display: flex;
          .statistics-analyze-info{
            width:80%;
            display: flex;
            flex-direction: column;
            .statistics-total{
              width: 100%;
              height: 36px;
              line-height: 36px;
              margin: 20px 0 13px;
              font-size: 36px;
              font-weight: 700;
              padding: 0 20px;
              color: #1f92ef;
            }
            .statistics-info{
              width: 100%;
              height: 12px;
              line-height: 12px;
              margin-bottom: 15px;
              padding: 0 20px;
              .statistics-title{
                display: inline-block;
                color: #5c6781;
                font-weight: 700;
                margin-right: 40px;      
              }
              .statistics-text{
                display: inline-block;
                span{
                  display: inline-block;
                  height: 12px;
                  line-height: 12px;
                  color:#5c6781;
                }
                .mg-rt6{
                  margin-right: 6px;
                }  
              }
            }
          }
          .statistics-chart-hint{
            width:20%;
            padding-top: 30px;
            .chart-hint-item{
              width: 100%;
              height: 12px;
              line-height: 12px;
              margin-bottom: 6px;
              .chart-hint-icon-total{
                display: inline-block;
                width: 10px;
                height: 10px;
                border: 1px solid #1f92ef;
                background-color: #e8f4fd;
                border-radius: 50%;
              }
              .chart-hint-icon-analyzed{
                display: inline-block;
                width: 10px;
                height: 10px;
                border: 1px solid #1f92ef;
                background-color: #1f92ef;
                border-radius: 50%;
              }
              .chart-hint-text{
                display: inline-block;
              }
            }
          }
        }
        .chart-main{
          width:100%;
          height: 60px;
        }
        .statistics-pie-title{
          width: 100%;
          height: 12px;
          line-height: 12px;
          padding: 0 20px;
          margin:20px 0;
          font-size: 12px;
          font-weight: 700;
          color: #5c6781;
        }
        .anlyze-pie-chart{
          width: 100%;
          height: 93px;
        }
      }
    }
  }
  .at-tabs--border-card>.at-tabs__content {
    padding: 20px 20px;
    border-right: 1px solid rgb(238, 238, 238);
    border-left: 1px solid rgb(238, 238, 238);
    border-bottom: 1px solid rgb(238, 238, 238);
  }
}
</style>

